<script>
    export default {
        name: 'Avatar',
        props: {
            src: {
                type: String,
            },
            alt: {
                type: String,
                default: '图片'
            },
            size: {
                type: [Number, String],
                default: 'inherit',
                validator(val) {
                    if (typeof val === 'string') {
                        return ['inherit', 'large', 'medium', 'small'].includes(val);
                    }
                    return typeof val === 'number';
                }
            },
            shape: {
                type: String,
                default: 'circle',
                validator(val) {
                    return ['circle', 'spuare', 'none'].includes(val);
                }
            },
            fit: {
                type: String,
                default: 'cover'
            }
        },
        data() {
            return {

            }
        },
        mounted() {},
        computed: {
            avatarClass() {
                const {
                    size,
                    shape
                } = this;
                let classList = ['avatar'];

                if (size && typeof size === 'string') {
                    classList.push(`size-${size}`);
                }

                if (shape) {
                    classList.push(`${shape}`);
                }

                return classList.join(' ');
            }
        },
        methods: {
            renderAvatar() {
                const {
                    src,
                    fit,
                    alt
                } = this;
                if (src) {
                    return < img
                    src = {
                        src
                    }
                    alt = {
                        alt
                    }
                    style = {
                        {
                            'objectFit': fit
                        }
                    }
                    />;
                }
                return this.$slots.default;
            },
        },
        render() {
            const {
                avatarClass,
                size
            } = this;

            const sizeStyle = typeof size === 'number' ? {
                height: `${size}px`,
                width: `${size}px`,
                lineHeight: `${size}px`,
                display: 'block'
            } : {};

            return ( <
                view class = {
                    avatarClass
                }
                style = {
                    sizeStyle
                } > {
                    this.renderAvatar()
                } <
                /view>
            );

        }
    }
</script>

<style>
    .avatar {
        display: inline-block;
        box-sizing: border-box;
    }

    .size-inherit {
        width: inherit;
        height: inherit;
    }

    .size-large {
        width: 60px;
        height: 60px;
    }

    .size-medium {
        width: 40px;
        height: 40px;
    }

    .size-small {
        width: 20px;
        height: 20px;
    }

    .circle {
        border-radius: 50%;
    }

    .spuare {
        border-radius: 6px;
    }

    .none {
        border-radius: 0;
    }


    img {
        height: 100%;
        width: 100%;
        border-radius: inherit;
    }
</style>